<template>
  <!--  售后- 充值对账查询 -->
  <div class="user_recharge_query">
    <el-form :inline="true" :model="elform" class="demo-form-inline1">
      <el-form-item label="部门:">
        <el-select
          v-model="departmentGuid"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 140px"
        >
          <el-option
            v-for="item in departmentoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名:">
        <el-input placeholder="姓名" v-model="userName" style="width: 120px" clearable size="mini"></el-input>
      </el-form-item>
      <el-form-item label="卡号:">
        <el-input placeholder="卡号" v-model="cardNumber" style="width: 130px" clearable size="mini"></el-input>
      </el-form-item>

      <el-form-item label="充值流水号:">
        <el-input
          placeholder="充值流水号"
          v-model="cardSerial"
          style="width: 120px"
          clearable
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item label="下发结果:">
        <el-select
          v-model="downloadResult"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 120px"
        >
          <el-option
            v-for="item in downloadResultoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型:">
        <el-select
          v-model="terminalType"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 120px"
          @change="getTerminal"
        >
          <el-option
            v-for="item in terminalTypeoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备名称:">
        <el-select
          v-model="terminalGuid"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 140px"
        >
          <el-option
            v-for="item in terminaloptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备编号:">
        <!-- <el-input
          placeholder="设备编号"
          v-model="terminalCode"
          style="width: 130px"
          clearable
          size="mini"
        ></el-input>-->
        <el-select
          v-model="terminalCode"
          placeholder="请选择"
          size="mini"
          clearable
          style="width: 140px"
        >
          <el-option
            v-for="item in terminalCodeoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="同步状态:">
        <el-select v-model="syncState" placeholder="请选择" size="mini" clearable style="width: 120px">
          <el-option
            v-for="item in syncStateoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="gosearch()" size="mini">查询</el-button>
        <el-button type="primary" @click="onExport()" size="mini">导出</el-button>
      </el-form-item>
      <!-- <el-form-item v-if="activeName == 'second'">
        <el-button type="primary" @click="getRecord()" size="mini">查询</el-button>
        <el-button type="primary" @click="onExportRecord()" size="mini">导出</el-button>
      </el-form-item>-->
    </el-form>
    <template v-if="detailslist2.length != 0">
      <h4>用户最近消费记录</h4>
      <el-table
        v-loading="loading1"
        :data="detailslist2"
        ref="detailslist2"
        border
        highlight-current-row
        :header-cell-style="headFirst"
        style="width: 100%"
        :cell-style="(res) => headFirst_col(res, [])"
      >
        <el-table-column
          prop="cardNumber"
          label="卡号"
          align="center"
          min-width="100px"
          v-if="formThead1.cardNumber.checked"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="姓名"
          align="center"
          v-if="formThead1.userName.checked"
        ></el-table-column>
        <el-table-column
          prop="dataType"
          label="数据类型"
          align="center"
          min-width="100px"
          v-if="formThead1.dataType.checked"
        ></el-table-column>
        <el-table-column prop="terminalName" label="设备名称" min-width="100px"></el-table-column>
        <el-table-column prop="terminalCode" label="设备编号" min-width="80px"></el-table-column>
        <el-table-column
          prop="originBalance"
          label="原卡余额(元)"
          align="center"
          v-if="formThead1.originBalance.checked"
          min-width="100px"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.originBalance | amountyuan }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="expenditure"
          label="消费金额(元)"
          align="center"
          min-width="90px"
          v-if="formThead1.expenditure.checked"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.expenditure | amountyuan }}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="newBalance"
          label="余额(元)"
          align="center"
          v-if="formThead1.newBalance.checked"
          min-width="100px"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.newBalance | amountyuan }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="dataMakeTime"
          label="消费时间"
          align="center"
          min-width="160px"
          v-if="formThead1.dataMakeTime.checked"
        ></el-table-column>
        <el-table-column
          prop="isSuccess"
          label="交易状态"
          align="center"
          v-if="formThead1.isSuccess.checked"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.isSuccess | isSuccesstype }}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="useType"
          label="消费类型"
          align="center"
          v-if="formThead1.useType.checked"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.useType | filterchargingType }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="serialNumber"
          label="卡片流水号"
          align="center"
          v-if="formThead1.serialNumber.checked"
          min-width="90px"
        ></el-table-column>
        <el-table-column
          prop="tradeSerialNumber"
          label="交易流水号"
          align="center"
          v-if="formThead1.tradeSerialNumber.checked"
          min-width="90px"
        ></el-table-column>
        <el-table-column
          prop="place"
          label="场所"
          align="center"
          v-if="formThead1.place.checked"
          width="160px"
        ></el-table-column>
      </el-table>
    </template>
    <h4>充值名单下发情况</h4>
    <el-table
      :data="tableinformation"
      style="width: 100%"
      border="border"
      :header-cell-style="headFirst"
      highlight-current-row
      v-loading="loading"
      :cell-style="(res) => headFirst_col(res, [])"
    >
      <el-table-column prop="cardNumber" label="卡号" min-width="100px"></el-table-column>
      <el-table-column prop="userName" label="姓名"></el-table-column>
      <el-table-column prop="terminalType" label="设备类型" min-width="100px">
        <template slot-scope="scope">{{ scope.row.terminalType | terminalTypeOption }}</template>
      </el-table-column>
      <el-table-column prop="terminalName" label="设备名称" min-width="100px"></el-table-column>
      <el-table-column prop="terminalCode" label="设备编号" min-width="80px"></el-table-column>
      <el-table-column prop="cardSerial" label="充值流水号" min-width="88px"></el-table-column>
      <el-table-column prop="adjustAmount" label="调整金额">
        <template slot-scope="scope">{{ scope.row.adjustAmount | amountjiao }}</template>
      </el-table-column>
      <!-- <el-table-column prop="adjustType" label="调整类型">
        <template slot-scope="scope">{{ scope.row.adjustType | fileteradjustType }}</template>
      </el-table-column>-->
      <el-table-column prop="downloadResult" label="下发结果">
        <template slot-scope="scope">{{ scope.row.downloadResult | downloadResultblack }}</template>
      </el-table-column>
      <el-table-column prop="lastUpdate" label="名单产生时间" min-width="150px"></el-table-column>
      <el-table-column prop="syncTime" label="名单下发到中间件时间" min-width="150px"></el-table-column>
      <el-table-column prop="downloadTime" label="名单下发到设备时间" min-width="150px"></el-table-column>
      <el-table-column prop="syncState" label="同步状态">
        <template slot-scope="scope">{{ scope.row.syncState | syncStateblack }}</template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChangepage"
        @current-change="handleCurrentChangepage"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // activeName: 'second',
      elform: {},
      filename: '充值名单下发情况',
      messageType: 0,
      sortName: '',
      administrator: '',
      changeschoolid: '',
      chageList: [],
      unitGuid: '',
      userName: '',
      cardNumber: '',
      // 充值流水号
      cardSerial: '',
      // 设备编号
      terminalCode: '',
      terminalCodeoptions: [],
      // 设备类型
      terminalType: '',
      terminalTypeoptions: [
        { value: 1, label: '消费机' },
        { value: 2, label: '充值机' },
        { value: 6, label: '水控' },
        { value: 27, label: '直饮水机' },
        { value: 28, label: '电吹风' },
        { value: 29, label: '发卡机' }
      ],
      downloadResult: '',
      // 下发结果
      downloadResultoptions: [
        { value: 0, label: '未下发' },
        { value: 1, label: '已下发' },
        { value: 2, label: '下发失败' }
      ],
      terminalGuid: '',
      terminaloptions: [],
      // 部门列表
      departmentoptions: [],
      // 当前部门
      departmentGuid: '',
      searchInfo: {},
      // 充值名单下发情况数据
      tableinformation: [],
      // 同步状态
      syncState: '',
      syncStateoptions: [
        { value: 0, label: '未同步' },
        { value: 1, label: '已同步' }
      ],
      loading: false,
      pageNum: 1,
      pageSize: 20,
      currentPage: 1,
      recordCount: 0,
      /**
       * 用户最近消费记录
       */
      loading1: false,
      detailslist2: [],
      pageNum1: 1,
      pageSize1: 20,
      currentPage1: 1,
      recordCount1: 0,
      formThead1: {
        cardNumber: { label: '卡号', prop: 'cardNumber', checked: true },
        userName: { label: '姓名', prop: 'userName', checked: true },
        originBalance: {
          label: '原卡余额(元)',
          prop: 'originBalance',
          checked: true
        },
        expenditure: {
          label: '消费金额(元)',
          prop: 'expenditure',
          checked: true
        },
        newBalance: { label: '余额(元)', prop: 'newBalance', checked: true },
        dataMakeTime: {
          label: '消费时间',
          prop: 'dataMakeTime',
          checked: true
        },
        isSuccess: { label: '交易状态', prop: 'isSuccess', checked: true },
        useType: { label: '消费类型', prop: 'useType', checked: true },
        serialNumber: {
          label: '卡片流水号',
          prop: 'serialNumber',
          checked: true
        },
        tradeSerialNumber: {
          label: '交易流水号',
          prop: 'tradeSerialNumber',
          checked: true
        },
        terminalCode: {
          label: '设备编号',
          prop: 'terminalCode',
          checked: true
        },
        place: { label: '场所', prop: 'place', checked: true },
        dataType: { label: '数据类型', prop: 'dataType', checked: true }
      }
    }
  },
  filters: {
    downloadStateblack(val) {
      let updateFlagObj = {
        0: '未下发',
        1: '已下发',
        2: '下发失败',
        5: '名单内容有误',
        6: '找不到对应的设备',
        7: '名单已过期'
      }
      return updateFlagObj[val]
    },

    // 调整类型
    adjustTypeblack(val) {
      let updateFlagObj = {
        0: '充值',
        1: '对账',
        2: '对账替换',
        3: '代扣',
        4: '合并'
      }
      return updateFlagObj[val]
    },
    // 下发结果
    downloadResultblack(val) {
      let updateFlagObj = {
        0: '未下发',
        1: '已下发',
        2: '下发失败'
      }
      return updateFlagObj[val]
    },
    // 同步结果
    syncStateblack(val) {
      let updateFlagObj = {
        0: '未同步',
        1: '已同步'
      }
      return updateFlagObj[val]
    }
  },
  created() {
    this.changeschoolid = this.$store.state.user.changeschoolid
    this.administrator = sessionStorage.getItem('administrator')

    // 获取部门列表
    this.departmentselectlist()
  },
  methods: {
    /**
     *
     */
    // 获取部门列表
    departmentselectlist() {
      this.departmentoptions = []
      this.$http({
        url: this.$http.adornUrl('/department/query-department-info'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          let Arr = data.messageContent == null ? [] : data.messageContent
          for (var i = 0; i < Arr.length; i++) {
            let itemobj = {
              value: Arr[i].departmentGuid,
              label: Arr[i].departmentName
            }
            this.departmentoptions.push(itemobj)
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 获取设备列表
    getTerminal(val) {
      this.terminalGuid = ''
      this.$http({
        url: this.$http.adornUrl('/terminal/terminal-info-brief-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            terminalType: val,
            unitGuid: this.changeschoolid
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          if (data.messageContent) {
            this.terminaloptions = data.messageContent.map(item => {
              return {
                label: item.terminalName,
                value: item.terminalGuid
              }
            })
            this.terminalCodeoptions = data.messageContent.map(item => {
              return {
                label: item.terminalCode,
                value: item.terminalCode
              }
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //记录查询
    searchinit() {
      this.loading = true
      this.$http({
        url: this.$http.adornUrl('/unit/balance-adjustment-name-page-search'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo,
            sortName: this.sortName
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        this.loading = false
        if (data.messageCode == 200) {
          this.tableinformation = data.messageContent.data
          this.pageNum = data.messageContent.pageNum
          this.pageSize = data.messageContent.pageSize
          this.currentPage = data.messageContent.pageNum
          this.recordCount = data.messageContent.recordCount
          if (this.tableinformation.length == 0) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //查询
    gosearch() {
      this.pageNum = 1
      this.searchInfo = {
        cardNumber: this.cardNumber,
        userName: this.userName,
        unitGuid: this.changeschoolid,
        userGuid: this.userGuid,
        departmentGuid: this.departmentGuid,
        cardSerial: this.cardSerial,
        terminalType: this.terminalType,
        terminalGuid: this.terminalGuid,
        terminalCode: this.terminalCode,
        downloadResult: this.downloadResult,
        syncState: this.syncState
      }
      if (
        this.cardNumber == '' &&
        this.userName == '' &&
        this.departmentGuid == '' &&
        this.cardSerial == '' &&
        this.terminalType == '' &&
        this.terminalGuid == '' &&
        this.terminalCode == '' &&
        this.downloadResult == ''
      ) {
        this.$message({
          showClose: true,
          message: '请填写条件后查询',
          type: 'warning'
        })
      } else {
        this.searchinit()
      }
      if (this.cardNumber != '' || this.userName != '') {
        this.recordinit()
      } else {
        this.detailslist2 = []
      }
    },
    // 导出
    onExport() {
      if (this.recordCount == 0) {
        this.$message({
          message: '无数据可导出',
          type: 'warning'
        })
        return false
      }
      this.$http({
        url: this.$http.adornUrl('/unit/balance-adjustment-name-page-search'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: 1,
            pageSize: this.recordCount,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.inExport(data.messageContent.data)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 导出数据需要用到的
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    // 导出
    inExport(detailslist) {
      detailslist.map(item => {
        // 下发结果
        item.downloadResult = this.$options.filters.downloadResultblack(
          item.downloadResult
        )
        // 同步结果
        item.syncState = this.$options.filters.syncStateblack(item.syncState)
        item.adjustAmount = this.amountjia(item.adjustAmount)
        item.adjustType = this.$options.filters.fileteradjustType(
          item.adjustType
        )
        item.terminalType = this.$options.filters.terminalTypeOption(
          item.terminalType
        )
      })
      require.ensure([], () => {
        let multiHeader = []
        let merges = []
        let tHeader = [
          '卡号',
          '用户姓名',
          '设备类型',
          '设备名称',
          '设备编号',
          '充值流水号',
          '调整金额',
          // '调整类型',
          '下发结果',
          '名单产生时间',
          '下发到中间件时间',
          '名单下发到设备时间',
          '同步状态'
        ]
        let filterValArr = [
          'cardNumber',
          'userName',
          'terminalType',
          'terminalName',
          'terminalCode',
          'cardSerial',
          'adjustAmount',
          // 'adjustType',
          'downloadResult',
          'lastUpdate',
          'syncTime',
          'downloadTime',
          'syncState'
        ]
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const filterVal = filterValArr
        const list = detailslist
        let data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          merges,
          filename: this.filename + this.getimeto(),
          tableheader: '1'
        })
      })
    },
    //分页
    handleSizeChangepage(val) {
      this.pageSize = val
      this.searchinit()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.searchinit()
    },
    /**
     * 记录
     */
    getRecord() {
      this.pageNum1 = 1
      this.searchInfo = {
        cardNumber: this.cardNumber,
        userName: this.userName,
        unitGuid: this.changeschoolid,
        userGuid: this.userGuid,
        departmentGuid: this.departmentGuid,
        cardSerial: this.cardSerial,
        terminalType: this.terminalType,
        terminalGuid: this.terminalGuid,
        terminalCode: this.terminalCode,
        downloadResult: this.downloadResult
      }
    },
    recordinit() {
      this.loading1 = true
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/consume/user-consume-and-water-details-page'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: { ...this.searchInfo },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading1 = false
        if (data.messageCode == 200) {
          this.detailslist2 = data.messageContent || []
          // this.recordCount1 = data.messageContent.recordCount;
          // this.currentPage1 = data.messageContent.pageNum;
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    onExportRecord() {},

    // 内容行高与字体
    cellStyle() {
      return {
        'font-size': '14px',
        padding: '0'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 280px;
}

.user_recharge_query {
  padding: 0 10px;

  h4 {
    margin: 10px 0;
  }
  .demo-form-inline1 {
    padding-top: 10px;
    padding-bottom: -10px;
    /deep/.el-form-item.el-form-item--medium {
      margin-bottom: 0px;
    }
  }
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }

  .page {
    margin-bottom: 10px;
    .el-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
